import { View, Text, Image, Input, Textarea, Button, Form } from "@tarojs/components";
import Taro from '@tarojs/taro';
import { AtImagePicker, AtRadio, AtInput, AtToast } from 'taro-ui'
import { useEffect, useState } from 'react';
import './addtemp.scss'

const Addtemp = () => {

        // 图片上传
        const [files, setfiles] = useState([{
                url: 'https://axhub.im/pro/e51730337892ea1f/images/%E7%BC%96%E8%BE%91%E6%A8%A1%E6%9D%BF/u420.png',
        }])
        const [files_t, setfiles_t] = useState([{
                url: 'https://axhub.im/pro/e51730337892ea1f/images/%E7%BC%96%E8%BE%91%E6%A8%A1%E6%9D%BF/u420.png',
        }])
        const [files_f, setfiles_f] = useState([{
                url: 'https://axhub.im/pro/e51730337892ea1f/images/%E7%BC%96%E8%BE%91%E6%A8%A1%E6%9D%BF/u420.png',
        }])

        //图片上传添加按钮
        const [add, setadd] = useState('')
        const [add_t, setadd_t] = useState('')
        const [add_f, setadd_f] = useState('')

        //监控图片数据，决定是否添加按钮
        useEffect(() => {
                if (files == "") {
                        setadd(true)
                } else {
                        setadd(false)
                };
                if (files_t == "") {
                        setadd_t(true)
                } else {
                        setadd_t(false)
                };
                if (files_f == "") {
                        setadd_f(true)
                } else {
                        setadd_f(false)
                };
                console.log('2', files)
        }, [files, files_t, files_f])



        //价格
        const [cost, setcost] = useState('5')
        const [discount, setdiscount] = useState('9')

        //拼团类型
        const [kind, setkind] = useState('3')



        //限购次数
        const [xiangou, setxiangou] = useState('1')

        //总团数
        const [zongtuan, setzongtuan] = useState('10')

        //描述
        const [miaoshu, setmiaoshu] = useState('新鲜的泰国大龙眼，超值拼团特惠，仅限3天；买到就是赚！即可下单，到店自提再享优惠')
        /*  useEffect(() => {
                 console.log(miaoshu)
         }, [miaoshu]) */

        //保存提示
        const [op, setop] = useState(false)


        //跳转
        const to = (v) => {
                console.log(v)
                Taro.navigateTo({
                        url: v
                })
        }

        //保存表单数据
        const [zhi, Setzhi] = useState()

        //获取表单值
        const Submit = (ev) => {
                let arr = [];
                arr.push(ev.detail.value, files[0].url, files_f[0].url, files_t[0].url, cost, discount, kind, xiangou, zongtuan)
                console.log(ev)
                Setzhi(arr)
                setop(true)
                /* Setzhi(ev.detail.value) */
        }



        //保存的函数
        /*  const cun = () => {
                 
                 //用计时器
                 setTimeout(() => {
                         setop(false)
                 }, 2000);
         } */

        return (
                <>
                        <Form onSubmit={Submit}>
                                <View className='heard'>
                                        精品泰国桂圆 1000g/盒
                                </View>

                                <View className='imgs'>
                                        <View>
                                                <AtImagePicker showAddBtn={add} files={files} mode='scaleToFill' onChange={(v) => { setfiles(v) }} length={1}></AtImagePicker>
                                                <View>封面图</View>
                                        </View>
                                        <View>
                                                <AtImagePicker showAddBtn={add_t} files={files_t} mode='scaleToFill' onChange={(v) => { setfiles_t(v) }} length={1}></AtImagePicker>
                                                <View>配图</View>
                                        </View>
                                        <View>
                                                <AtImagePicker showAddBtn={add_f} files={files_f} mode='scaleToFill' onChange={(v) => { setfiles_f(v) }} length={1}></AtImagePicker>
                                                <View>配图</View>
                                        </View>

                                </View>

                                <View className='border'></View>

                                <View className='peizhi'>
                                        拼团配置

                                        <View className='jiage'>
                                                <View>
                                                        <View>商品零售价</View>
                                                        <AtInput type='text' name='cost' value={cost} onChange={(value) => { setcost(value) }} />
                                                </View>
                                                <View>
                                                        <View>商品拼团价</View>
                                                        <AtInput type='text' name='discount' value={discount} onChange={(value) => { setdiscount(value) }} />
                                                </View>
                                        </View>

                                        <View className='type'>
                                                <AtRadio name='type' options={
                                                        [
                                                                { label: '3人成团', value: '3' },
                                                                { label: '5人成团', value: '5' },
                                                                { label: '10人成团', value: '10' },
                                                                { label: '20人成团', value: '20' },
                                                        ]
                                                } value={kind} onClick={(v) => { setkind(v) }}
                                                />
                                        </View>

                                        <View className='xiangou'>
                                                <View>
                                                        <View>每人限购份数</View>
                                                        <AtInput type='text' value={xiangou} onChange={(value) => { setxiangou(value) }} />
                                                </View>

                                        </View>

                                        <View className='zongtuan'>
                                                <View>
                                                        <View>总团数</View>
                                                        <AtInput type='text' value={zongtuan} onChange={(value) => { setzongtuan(value) }} />
                                                </View>
                                        </View>

                                        <View className='jisuan'>
                                                <View>根据您的配置计算，您需要准备的货源总份数为50份</View>
                                        </View>

                                        <View className='time'>
                                                <View>
                                                        <View>开始时间</View>
                                                        <View>2019-10-30 12:00:00</View>
                                                </View>
                                                <View>
                                                        <View>结束时间</View>
                                                        <View>2019-11-03 12:00:00</View>
                                                </View>
                                        </View>

                                        <View className='ti_time'>
                                                <View> 下单后提货时间 <Text>2小时后</Text></View>
                                        </View>

                                        <View className='miaoshu'>
                                                <View>商品说明</View>
                                                <View>
                                                        <Textarea name='miaoshu' value={miaoshu} onInput={(ev) => { setmiaoshu(ev.detail.value) }}>
                                                        </Textarea>
                                                </View>
                                        </View>
                                </View>

                                <View className='anniu'>
                                        <Button formType='submit'>仅保存</Button>

                                        <Button formType='submit' onClick={() => { to('/pages/Group/index') }}>使用该模板创建拼团</Button>
                                </View>

                        </Form>


                        <AtToast text='保存成功' duration='2000' isOpened={op} onClose={() => { setop(false) }}></AtToast>
                </>
        );
};
export default Addtemp;